<template>
    <el-container >
        <el-aside :width="aside_width + 'px'" style="box-shadow:  rgba(0,21,41,0.40) 2px 0 6px;">
            <Aside  :isCollapse="isCollapse" />
        </el-aside>

        <el-container>
            <el-header >
                <Header v-bind:menu_fold="menu_fold" v-bind:updateCollapse="updateCollapse" :avatar="avatar"/>
            </el-header>

            <el-main style="margin-top: 15px">
                <router-view/>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
    import Aside from "@/components/Aside";
    import Header from "@/components/Header";

    export default {
        name: "Home",
        components: {Header, Aside},
        comments:{
            Aside,
            Header,
        },
        data() {
            return {
                menu_fold: 'el-icon-s-fold',
                isCollapse: false,
                aside_width: 200,
                avatar:""
            }
        },
        created() {
            let user = JSON.parse(localStorage.getItem("user"));
            this.avatar=user.avatar;
        },
        methods:{

            updateCollapse(){
                this.isCollapse=!this.isCollapse;
                this.menu_fold="el-icon-s-unfold";
                if (this.isCollapse){
                    this.aside_width=50;
                }else{
                    this.aside_width=200;
                }
            },
        }
    };
</script>

<style scoped>


    /deep/ .el-breadcrumb{
        height: 80px;
        line-height: 80px;
        font-size: 18px;
        /*position: relative;*/
        /*right: 407px;*/
    }


    /deep/ .headerTableBg{
        background-color: #cac8c869  !important;
    }



</style>